<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="胃肠道症状评定量表(GSRS)评估结果详情，查看用户在反流症状、腹泻症状、便秘症状、消化不良症状和恶心呕吐等方面的表现评分，了解胃肠道健康状况。">
        <meta name="keywords" content="胃肠道症状评定量表, GSRS量表结果, 胃肠道健康评估结果, 消化系统症状评估, 反流症状, 腹泻, 便秘, 消化不良, 恶心呕吐">
        <meta name="custom-image" content="https://totemlife.cn/apps/public/gsrs-scale-cover.jpg">
        <title>GSRS量表评估结果</title>
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
        <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
        <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
        <style>
            /* 自定义颜色类 */
            .bg-teal {
                background-color: #20c997;
            }

            /* 页面样式 */
            body {
                background-color: #f8f9fa;
                padding-bottom: 60px;
            }

            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: rgba(15, 76, 129, 0.8);
                color: white;
                padding: 10px 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            /* 移动端优化 */
            @media (max-width: 576px) {
                /* 标题优化 */
                h1 {
                    font-size: 1.75rem;
                }

                h5 {
                    font-size: 1.1rem;
                }

                /* 表格响应式优化 */
                .table-responsive {
                    font-size: 0.875rem;
                }

                /* 结果显示优化 */
                .display-4 {
                    font-size: 2.5rem;
                }

                /* 图表容器优化 */
                .chart-container {
                    height: 250px !important;
                    margin-top: 1rem;
                }

                /* 手风琴组件优化 */
                .accordion-button {
                    padding: 0.75rem;
                    font-size: 0.95rem;
                }

                /* 报告按钮优化 */
                .report-btn {
                    width: 100%;
                    margin-top: 0.5rem;
                }

                /* 评分标签优化 */
                .score-badge {
                    min-width: 24px;
                }
            }
        </style>
    </head>
    <body>
{{!-- GSRS胃肠道症状评定量表评估结果页面 --}}
<div class="container mt-4 mb-5">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>GSRS量表评估结果</h1>
                <div class="d-flex">
                    <a href="/apps/scales/scales-dashboard" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-th-large"></i> 量表工具
                    </a>
                    <a href="/apps/scales/gsrs-scale" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> 返回
                    </a>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="card-title">基本信息</h5>
                            <table class="table table-borderless">
                                <tr>
                                    <th style="width: 120px;">评估人:</th>
                                    <td>{{userInfo.real_name}}</td>
                                </tr>
                                <tr>
                                    <th>评估日期:</th>
                                    <td>{{formatDate assessment.assessment_date "YYYY-MM-DD HH:mm:ss"}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5 class="card-title">评估结果</h5>
                            <div class="text-center py-3">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="fs-4 mb-2">总分</div>
                                        <div class="display-4 fw-bold mb-2">{{assessment.total_score}}</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="fs-4 mb-2">平均分</div>
                                        <div class="display-4 fw-bold mb-2">{{assessment.avg_score}}</div>
                                    </div>
                                </div>
                                <div class="fs-4 mb-2 mt-2">
                                    <span class="badge {{#if (eq assessment.result_level '轻微')}}bg-success{{else if (eq assessment.result_level '中度')}}bg-warning{{else if (eq assessment.result_level '较重')}}bg-orange{{else}}bg-danger{{/if}} px-3 py-2">
                                        {{assessment.result_level}}
                                    </span>
                                </div>
                                <p class="mb-0">{{assessment.result_description}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">症状分类得分</h5>
                    <a href="/apps/scales/gsrs-scale/report/{{assessment.id}}" class="btn btn-primary btn-sm report-btn">
                        <i class="fas fa-file-alt"></i> 生成报告
                    </a>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>症状类别</th>
                                            <th class="text-center">平均分</th>
                                            <th class="text-center">严重程度</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each categories}}
                                        <tr>
                                            <td>{{name}}</td>
                                            <td class="text-center">{{formatNumber (lookup ../categoryScores id) 2}}</td>
                                            <td class="text-center">
                                                <span class="badge {{#if (lte (lookup ../categoryScores id) 2)}}bg-success{{else if (lte (lookup ../categoryScores id) 3)}}bg-warning{{else if (lte (lookup ../categoryScores id) 4)}}bg-orange{{else}}bg-danger{{/if}}">
                                                    {{#if (lte (lookup ../categoryScores id) 2)}}
                                                        轻微
                                                    {{else if (lte (lookup ../categoryScores id) 3)}}
                                                        中度
                                                    {{else if (lte (lookup ../categoryScores id) 4)}}
                                                        较重
                                                    {{else}}
                                                        严重
                                                    {{/if}}
                                                </span>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="border rounded p-2 h-100 chart-container">
                                <canvas id="categoryChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">详细评分</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="categoryAccordion">
                        {{#each categories}}
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading{{id}}">
                                <button class="accordion-button {{#if (eq id 1)}}{{else}}collapsed{{/if}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{id}}" aria-expanded="{{#if (eq id 1)}}true{{else}}false{{/if}}" aria-controls="collapse{{id}}">
                                    {{name}} (平均分: {{formatNumber (lookup ../categoryScores id) 2}})
                                </button>
                            </h2>
                            <div id="collapse{{id}}" class="accordion-collapse collapse {{#if (eq id 1)}}show{{/if}}" aria-labelledby="heading{{id}}" data-bs-parent="#categoryAccordion">
                                <div class="accordion-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>症状</th>
                                                    <th style="width: 80px;" class="text-center">得分</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{#each ../questions}}
                                                {{#if (eq category ../id)}}
                                                <tr>
                                                    <td>{{question_text}}</td>
                                                    <td class="text-center">
                                                        <span class="badge score-badge {{#if (eq (lookup ../../answers id) '0')}}bg-success{{else if (eq (lookup ../../answers id) '1')}}bg-info{{else if (eq (lookup ../../answers id) '2')}}bg-info{{else if (eq (lookup ../../answers id) '3')}}bg-warning{{else if (eq (lookup ../../answers id) '4')}}bg-warning{{else if (eq (lookup ../../answers id) '5')}}bg-danger{{else if (eq (lookup ../../answers id) '6')}}bg-danger{{else}}bg-secondary{{/if}}">
                                                            {{#if (lookup ../../answers id)}}
                                                                {{lookup ../../answers id}}
                                                            {{else}}
                                                                未答
                                                            {{/if}}
                                                        </span>
                                                    </td>
                                                </tr>
                                                {{/if}}
                                                {{/each}}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </div>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">评分说明</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>得分标准</h6>
                            <ul class="list-group mb-3">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    0分
                                    <span class="badge bg-success">完全没有</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    1分
                                    <span class="badge bg-info">稍微有</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    2分
                                    <span class="badge bg-info">少量有</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    3分
                                    <span class="badge bg-warning">中等程度</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    4分
                                    <span class="badge bg-warning">较明显不适</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    5分
                                    <span class="badge bg-danger">比较严重</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    6分
                                    <span class="badge bg-danger">特别严重</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>结果解释</h6>
                            <ul class="list-group">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    平均分 ≤ 2
                                    <span class="badge bg-success">轻微</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    平均分 2.1-3
                                    <span class="badge bg-warning">中度</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    平均分 3.1-4
                                    <span class="badge bg-orange">较重</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    平均分 > 4
                                    <span class="badge bg-danger">严重</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="alert alert-warning mt-3">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>注意：</strong>本评估仅供参考，不能替代专业医疗机构的诊断。如有疑虑，请及时咨询专业医师。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer>
    <div class="text-center">
        <a id="tmall-app-home-link" href="weixin://dl/business/?appid=wx1b441d1a37b278e1&path=pages/index/index&env_version=release" class="text-decoration-none">
            <span id="tmall-app-home-title" style="color: white; font-size: 16px; margin-left: 5px;">
                <i class="fa fa-house"></i> 广州图腾生命医学研究有限公司
            <span>
        </a>
        &copy; {{currentYear}}
    </div>
</footer>

<!-- 将所有JS文件移到这里，并添加defer属性 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
<script src="/apps/js/bootstrap.bundle.min.js" defer></script>
<script src="/apps/js/wx-client-dom.js" defer></script>
<script src="/apps/js/chart.js" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 绘制分类得分图表
        const ctx = document.getElementById('categoryChart').getContext('2d');

        // 准备数据
        const categories = [
            {{#each categories}}
                "{{name}}",
            {{/each}}
        ];

        const scores = [
            {{#each categories}}
                {{formatNumber (lookup ../categoryScores id) 2}},
            {{/each}}
        ];

        // 生成颜色
        const backgroundColors = [
            'rgba(255, 99, 132, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
            'rgba(75, 192, 192, 0.7)',
            'rgba(153, 102, 255, 0.7)'
        ];

        // 创建图表
        new Chart(ctx, {
            type: 'radar',
            data: {
                labels: categories,
                datasets: [{
                    label: '症状得分',
                    data: scores,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
                }]
            },
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: 1,
                        suggestedMax: 5
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: '症状分布图',
                        font: {
                            size: 14
                        }
                    }
                }
            }
        });
    });
</script>

</body>
</html> 
